<template>
  <view class="log-container">
    <view
      v-for="item in listInfo"
      :key="item.id"
      class="log-item">
      <view class="log-header">
        <view class="left-container">
          <image class="image" :src="item.cover"></image>
          <view class="log-info">
            <view class="name">
              <view v-if="item.tool_id">{{ item.title }}</view>
              <view v-else>{{ item.title2 }}</view>
              <view class="code">{{ item.code }}</view>
            </view>
            <view class="des">锚点标题:{{ item.title }}</view>
          </view>
        </view>
      </view>
      <view class="url-content">
        <view class="url">{{ item.article_url }}</view>
        <view class="footer">
          <view class="time">{{ item.created_at }}</view>
          <view class="copy" @click="queryPublishStatus(item)">复制链接</view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
  import { articUrlLog, queryPublishStatus } from '@/api/applet';
  import { parseTime } from '@/utils/parseTime';
  export default {
    data() {
      return {
        listInfo: [],
        pageNum: 1,
        showNoMoreFlag: false,
        publish_id: ''
      }
    },
    onLoad() {
      this.getArticUrlLog();
    },
    methods: {
      getArticUrlLog() {
        articUrlLog({
          pageNum: this.pageNum
        }).then(result => {
          if (result && result.data && result.data.records && result.data.records.length > 0) {
            let listData = result.data.records;
            listData.forEach(item => {
              item.created_at = parseTime(new Date(item.created_at), '{y}-{m}-{d} {h}:{i}:{s}');
              item.title2 = item.title.replace('获取途径', '');
            })
            this.listInfo = [...this.listInfo, ...listData];
            if (this.pageNum === result.data.total_pages) {
              this.showNoMoreFlag = true;
            }
            this.pageNum = this.pageNum + 1;
          }
        })
      },

      // 查询发布状态
      queryPublishStatus(itemData) {
        this.publish_id = itemData.publish_id;
        if (itemData.article_url && itemData.article_url.indexOf('http://mp.weixin.qq.com/s?') < 0) {
          this.setClipboardData(itemData.article_url);
          return;
        }

        queryPublishStatus({
          publish_id: this.publish_id,
        }).then(result => {
          if (result && result.data && result.data.article_url) {
            itemData.article_url = result.data.article_url;
            this.setClipboardData(result.data.article_url);
          }
        })
      },

      // 设置剪切板
      setClipboardData(txt) {
        uni.setClipboardData({
          data: txt,
          success: function () {
            uni.showToast({
              title: '复制成功',
              icon: 'none',
              mask: false
            })
          }
        });
      },
    },
    // 下拉加载
    onReachBottom() {
      if (!this.showNoMoreFlag) {
        this.getArticUrlLog();
      } else {
        uni.showToast({
          title: '没有更多的数据啦！',
          icon: 'none'
        })
      }
    },
  }
</script>

<style lang="scss">
  page{
    background-color: #f5f5f5;
  }
  .log-container{
    padding: 32rpx;

    .log-item{
      padding: 32rpx;
      background-color: #fff;
      border-radius: 16rpx;
      margin-bottom: 24rpx;
    }

    .log-header{
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 24rpx;
    }

    .left-container{
      display: flex;
      width: 100%;

      .log-info{
        flex: 1;
      }

      .image{
        width: 86rpx;
        height: 86rpx;
        margin-right: 24rpx;
      }

      .name{
        font-size: 28rpx;
        font-weight: 700;
        color: #1d1d1d;
        display: flex;
        justify-content: space-between;
      }

      .des{
        margin-top: 8px;
        font-size: 24rpx;
        color: #bebec2;
      }

      .code{
        font-size: 30rpx;
        color: $uni-color-primary;
      }
    }

    .url-content{
      border: 2rpx solid #f9f9ff;

      .url{
        padding: 24rpx;
        word-break: break-all;
        font-size: 24rpx;
        color: #000;
        line-height: 40rpx;
      }

      .footer{
        padding: 0 24rpx;
        height: 58rpx;
        background: rgba(249,249,255,.6);
        border-radius: 0 0 10rpx 10rpx;
        display: flex;
        justify-content: space-between;
        align-items: center;

        .time{
          font-size: 20rpx;
          color: #ceced6;
        }

        .copy{
          color: $uni-color-primary;
        }
      }
    }
  }
</style>
